<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌手详情</title>
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/list.css">
    <style>
        .apl {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff; /* 设置背景颜色，如果需要的话 */
            /* 其他样式属性，例如 padding、border 等 */
        }
    </style>
</head>
<body>
    <div id="nav" class="w-75 m-auto"></div>
    <div class="container-fluid w-75 m-auto" style="height: 150vh" id="singerDetailApp">
        <div class="media mt-5">
            <img :src="'/music_platform'+singer.pic" class="mr-3" alt="..." style="width: 200px;height: 200px">
            <div class="media-body">
                <h5 class="mt-0">{{singer.sname}}</h5>
                <span v-if="followStatus===false"><button class="btn btn-danger btn-sm" @click="follow">关注</button></span>
                <span v-else>
                    <template>
                    <el-popconfirm
                            title="确定取消关注？"
                            @confirm="unfollow"
                    >
                        <el-button slot="reference" size="small">已关注</el-button>
                    </el-popconfirm>
                </template>
                </span>
                <div class="mt-2">
                    <span>歌曲数：{{songsNum}}</span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <span>专辑数：{{albumList.length}}</span>
                </div>
            </div>
        </div>
        <div class="mt-5">
            <div class="ml-lg-2 w-50">
                热门歌曲
                <ul class="list-group">
                    <li v-for="(song,index) in hotSong" class="list-group-item">
                        <a :href="'/music_platform/pages/song_detail.html?mid='+song.mid" style="text-decoration: none;color: #0f0f0f">
                            {{index+1}}：{{song.mname}}
                        </a>
                        <span class="float-right">
                            <el-button type="warning" size="small" @click="playSong(song.mid)">播放</el-button>
                            <span v-if="song.favoriteStatus===0">
                                <el-button type="primary" @click="preFavoriteSong(song.mid)" size="small">收藏</el-button>
                                <el-dialog title="收藏"
                                           :visible.sync="dialogFormVisible"
                                           width="50%">
                                    <template>
                                      <el-tabs v-model="activeName">
                                        <el-tab-pane label="选择歌单" name="first">
                                          <el-select v-model="playListChosed" filterable placeholder="请选择">
                                            <el-option
                                                    v-for="(item,index) in userPlayList"
                                                    :key="index"
                                                    :label="item.plname"
                                                    :value="item.plid">
                                            </el-option>
                                          </el-select>
                                            <el-button key="btn1" size="small" @click="dialogFormVisible = false">取 消</el-button>
                                            <el-button key="btn2" type="primary"  size="small" @click="addFavorite">确 认</el-button>
                                        </el-tab-pane>
                                        <el-tab-pane label="创建新歌单" name="second">
                                            <el-input placeholder="请输入歌单名" v-model="UserCreatePlayListName"></el-input>
                                            <el-button key="btn3" size="small" @click="dialogFormVisible = false">取 消</el-button>
                                            <el-button v-if="UserCreatePlayListName!==''" key="btn4" type="primary"  size="small" @click="addFavoriteToNew">确 认</el-button>
                                        </el-tab-pane>
                                      </el-tabs>
                                    </template>
                                </el-dialog>
                            </span>
                            <span v-else>
                                <el-button slot="reference" size="small" @click="unfavorite()">已收藏</el-button>
                            </span>
                        </span>
                    </li>
                </ul>
            </div>
            <template>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="专辑" name="first">
                        <div v-for="(item,index) in albumList" class="row mt-5">
                            <div class="col-md-3">
                                <a :href="'/music_platform/pages/album_detail.html?alid='+item.alid" style="text-decoration: none;color: #0f0f0f">
                                    <div>{{item.aname}}</div>
                                    <img :src="'/music_platform'+item.pic" class="rounded float-left" alt="..." style="width: 200px;height: 200px">
                                </a>
                            </div>
                            <div class="col-md-7">
                                <ul class="list-group">
                                    <li v-for="(song,index) in item.songs" class="list-group-item">
                                        <a :href="'/music_platform/pages/song_detail.html?mid='+song.mid" style="text-decoration: none;color: #0f0f0f">
                                            {{index+1}}.&nbsp&nbsp{{song.mname}}
                                        </a>
                                        <span class="float-right">
                                            <el-button @click="playSong(song.mid)" type="warning" size="small">播放</el-button>
                                            <span v-if="song.favoriteStatus===0">
                                                <el-button type="primary" @click="dialogFormVisible = true;songSelectedSid=song.mid" size="small">收藏</el-button>
                                            </span>
                                            <span v-else>
                                                <el-button slot="reference" size="small" @click="unfavorite(song.mid)">已收藏</el-button>
                                            </span>
                                            <span>
                                                <a :href="'/music_platform/download?id='+song.mid" class="song-info">
                                                    <i class="fas fa-download"></i>
                                                </a>
                                            </span>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="歌手详情" name="second">
                        <div class="mt-2">
                            {{singer.desc}}
                        </div>
                    </el-tab-pane>
<!--                    <el-tab-pane label="相似歌手" name="third">-->

<!--                    </el-tab-pane>-->
                </el-tabs>
            </template>
        </div>
        <div class="apl">
            <aplayer autoplay
                     :music="{
                title: this.audio.title,
                artist: this.audio.artist,
                src: this.audio.src,
                pic: this.audio.pic,
                lrc: this.audio.lrc
            }" :float="true" :showLrc="true" :mutex="true" :listMaxHeight="'70px'":listFolded="true"
                     :list=this.list     />
        </div>

        <button @click="togglePlaylist" class="list-toggle-button">播放列表</button>
        <div @mouseleave="listOut" class="list-playlist-container" :class="{ 'show-playlist': isPlaylistOpen }">
            <!-- 清空按钮 -->
            <button @click="clearPlaylist" class="clear-playlist-button">一键清空</button>

            <!-- 播放列表信息 -->
            <div class="playlist-info">
                <p>播放列表信息:</p>
                <p>歌曲数量: {{ list.length }}</p>
                <!-- 可以添加其他相关信息 -->
            </div>
            <!-- 歌曲列表 -->
            <div class="list-song-list">
                <!-- 歌曲条目 -->
                <div v-for="(song,index) in list" :key="song.id" class="list-song-item">
                    <div class="list-song-info">
                        <strong class="song-info">{{ index + 1 }}. {{ song.title }} - {{ song.artist }}</strong>
                    </div>
                    <div class="list-delete-button" @click="removeSong(song.id)">删除</div>
                </div>
            </div>
        </div>
    </div>


    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/foot.js"></script>
    <script src="js/newnav.js"></script>
    <script src="js/vue.js"></script>
    <!-- 引入 Vue-APlayer -->
    <script src="js/vue-aplayer.min.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/getParameter.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let app = new Vue({
            el:"#singerDetailApp",
            data:{
                activeName: 'first',
                singer:{},
                albumList:[],
                hotSong:[],
                songsNum:0,
                followStatus:false,
                dialogFormVisible:false,
                UserCreatePlayListName:'',
                playListChosed:'',
                userPlayList:[-1],
                songSelectedSid:'',
                audio: {
                    title:'无歌曲',
                    artist: '无歌曲',
                    src: '',
                    pic: '/music_platform/img/R-C.png',
                    lrc:''
                },
                list:[],
                isPlaylistOpen: false,
            },
            methods:{
                async playSong(mid){
                    let _this = this;
                    await axios.get("/music_platform/singleSong/"+mid).then(function (response){
                        _this.audio.title = response.data.data.mname;
                        _this.audio.artist = response.data.data.singer.sname;
                        _this.audio.pic = "/music_platform"+response.data.data.pic;
                        _this.audio.lrc = response.data.data.lyc;
                        _this.audio.src = "/music_platform"+response.data.data.source;
                    })
                    this.addAudio();
                },
                loadSingerDetail:function (){
                    let sid = getParameter("sid");
                    let _this = this;
                    axios.get("/music_platform/singer/singerDetail",{
                        params:{
                            sid:sid
                        }
                    }).then(function (response){
                        _this.singer = response.data.data;
                        _this.albumList = response.data.data.albums
                        _this.hotSong = response.data.data.singleSongs
                    })
                },
                loadUserHasPlayList:function (){
                    let _this = this;
                    axios.get("/music_platform/playlist/findByUid").then(function (response){
                        if (response.data.flag == true){
                            _this.userPlayList = response.data.data;
                        }
                    })
                },
                getSongsNum:function (){
                    let sid = getParameter("sid");
                    let _this = this;
                    axios.get("/music_platform/singleSong/songsNumCount",{
                        params:{
                            sid:sid
                        }
                    }).then(function (response){
                        _this.songsNum = response.data.data
                    })
                },
                follow:function (){
                    let sid = getParameter("sid");
                    let _this = this;
                    axios.get("/music_platform/user/follow",{
                        params:{
                            sid:sid
                        }
                    }).then(function (response){
                        if (response.data.flag===false){
                            location.href = "/music_platform/pages/login.html"
                        }else {
                            _this.isFollow();
                        }
                    })
                },
                unfollow:function (){
                    let sid = getParameter("sid");
                    let _this = this;
                    axios.get("/music_platform/user/unfollow",{
                        params:{
                            sid:sid
                        }
                    }).then(function (response){
                        _this.isFollow();
                    })
                },
                isFollow:function (){
                    let sid = getParameter("sid");
                    let _this = this;
                    axios.get("/music_platform/singer/isFollow",{
                        params:{
                            sid:sid
                        }
                    }).then(function (response){
                        _this.followStatus = response.data.flag;
                    })
                },
                unfavorite:function (val){
                    let _this = this;
                    axios.get("/music_platform/playlist/unFavorite",{
                        params:{
                            mid:val
                        }
                    }).then(function (response){
                        _this.loadSingerDetail();
                    })
                },
                addFavorite:function (){
                    let _this = this;
                    axios.get("/music_platform/playlist/addFavorite",{
                        params:{
                            mid:_this.songSelectedSid,
                            plid:_this.playListChosed
                        }
                    }).then(function (response){
                        _this.loadSingerDetail();
                        _this.dialogFormVisible=false;
                    })
                },
                addFavoriteToNew:function (){
                    let _this = this;
                    axios.get("/music_platform/playlist/addFavoriteToNew",{
                        params:{
                            mid:_this.songSelectedSid,
                            plname:_this.UserCreatePlayListName
                        }
                    }).then(function (response){
                        _this.loadSingerDetail();
                        _this.dialogFormVisible=false;
                    })
                },
                preFavoriteSong:function (val){
                    if (this.userPlayList[0]===-1){
                        location.href = "/music_platform/pages/login.html"
                    }else {
                        this.dialogFormVisible = true;
                        this.songSelectedSid=val
                    }
                },
                addAudio(){
                    if (!this.list.some(item => item.title === this.audio.title &&
                        item.artist === this.audio.artist)){
                        const audioCopy = { ...this.audio };
                        this.list.push(audioCopy);
                        // 更新数据后将数据保存到localStorage
                        localStorage.setItem('myList', JSON.stringify(this.list));
                    }
                },
                removeSong(index) {
                    // 在这里实现删除歌曲的逻辑
                    this.list.splice(index, 1);
                    localStorage.setItem('myList', JSON.stringify(this.list));
                },
                togglePlaylist() {
                    this.isPlaylistOpen = !this.isPlaylistOpen;
                },
                listOut(){
                    this.isPlaylistOpen = false;
                },
                clearPlaylist(){
                    this.list = []
                }
            },
            created:function (){
                this.loadSingerDetail();
                this.getSongsNum();
                this.isFollow();
                this.loadUserHasPlayList();
            },
            components: {
                Aplayer: window.VueAPlayer  // 注册Vue-APlayer组件
            },
            mounted:function (){
                // 在Vue实例初始化后，尝试从localStorage获取数据
                var storedList = localStorage.getItem('myList');
                if (storedList) {
                    // 如果本地存储中有数据，将其解析并赋值给Vue的数据
                    this.list = JSON.parse(storedList);
                }
            },
            beforeDestroy() {
                localStorage.setItem('myList', JSON.stringify(this.list));
            }
        })
    </script>
</body>
</html>